<template>
	<!-- 代理合作 -->
	<div class="agency_cooperation">
		<div class="head">
			<nut-navbar class="navbar" z-index="5" fixed safe-area-inset-top>
				<template #content>
					<span>{{ t('proxy_page_agent') }}</span>
				</template>
				<template #left>
					<iconpark-icon @click="router.go(-1)" class="close" icon-id="you" size="1.2rem"></iconpark-icon>
				</template>
				<template #right> </template>
			</nut-navbar>
		</div>
		<div :class="['content', [3,4,5,7].includes(+value) ? 'p-0' : '']">
			<nut-tabs title-scroll title-gutter="24" v-model="value" class="tabs-box">
				<nut-tab-pane title="代理链接" pane-key="1">
					<ProxyLinks v-model:tabValue="value"  />
				</nut-tab-pane>
				<nut-tab-pane title="数据汇总" pane-key="2">
					<DataSummary v-model:tabValue="value" />
				</nut-tab-pane>
				<nut-tab-pane title="我的佣金" pane-key="3">
					<MyCommission v-model:tabValue="value"  />
				</nut-tab-pane>
				<nut-tab-pane title="直属数据" pane-key="4">
					<DirectData v-model:tabValue="value"  />
				</nut-tab-pane>
				<nut-tab-pane title="团队数据" pane-key="5">
					<TeamData v-model:tabValue="value" />
				</nut-tab-pane>
				<nut-tab-pane title="返佣比例" pane-key="6">
					<RebateRatio v-model:tabValue="value" />
				</nut-tab-pane>
				<nut-tab-pane title="直属开户" pane-key="7">
					<DirectAccountOpening v-model:tabValue="value" />
				</nut-tab-pane>
			</nut-tabs>
		</div>
	</div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import ProxyLinks from './components/ProxyLinks.vue';
import DataSummary from './components/DataSummary.vue';
import MyCommission from './components/MyCommission.vue';
import DirectData from './components/DirectData.vue';
import TeamData from './components/TeamData.vue';
import RebateRatio from './components/RebateRatio.vue';
import DirectAccountOpening from './components/DirectAccountOpening.vue';

const { t } = useI18n();
const router = useRouter();

import { ref } from 'vue';
const value = ref('1');
</script>

<style lang="scss" scoped>
$primary-color: #c6c4f5;
$primary-color-hover: #5b6cff;
.agency_cooperation {
	padding-top: 55px;
	overflow: hidden;
	height: 100vh;
	display: flex;
	flex-direction: column;
	.close {
		transform: rotate(180deg);
	}
}

.content {
	padding: 0 10px 10px;
	position: relative;
	flex: 1;

	&.p-0 {
		padding: 0;
	}
	.tabs-box {
		box-sizing: border-box;

		:deep(.nut-tabs__content) {
			height: calc(100vh - 111px);
		}

		:deep(.nut-tabs__titles) {
			margin-bottom: 12px;
			padding: 0;
			.nut-tabs__titles-item__text {
				font-size: 14px;
			}
		}

		:deep(.nut-tabs__titles-item) {
			height: 44px;
			width: 56px;
			font-size: 14px;
			font-weight: 500;
			color: $primary-color;
		}

		:deep(.nut-tabs__titles-item.nut-tabs__titles-item--active) {
			color: $primary-color-hover;
		}
	}
}

.head {
	background: #0b0c28;
	width: 100%;
	position: fixed;
	height: 55px;
	z-index: 5;
	top: 0;
}
</style>
